<!-- 访问DOM元素 -->
<!-- <template>
    <div>
      <input ref="myInput" placeholder="点击按钮聚焦我">
      <button @click="focusInput">聚焦</button>
    </div>
  </template>
  
  <script>
  export default {
    methods: {
      focusInput() {
        this.$refs.myInput.focus();
      }
    }
  };
  </script> -->

<!-- 访问子组件实例 -->
<!-- 父组件 -->
<!-- <template>
    <div>
        <child-component ref="childRef"></child-component>
        <button @click="callChildMethod">调用子组件方法</button>
    </div>
</template>

<script>

import ChildComponent from './ChildComponet.vue';

export default {
    components: {
        ChildComponent
    },
    methods: {
        callChildMethod() {
            this.$refs.childRef.someMethod();
        }
    }
};
</script> -->

<!--表单验证-->
<template>
    <div>
      <form @submit.prevent="submitForm">
        <input ref="username" placeholder="用户名">
        <button type="submit">提交</button>
      </form>

      <h1>Here is a child component!</h1>
      <ButtonCounter />
    </div>
  </template>
  
  <script>
  import ButtonCounter from './button.vue'

  export default {
    components: {
    ButtonCounter
  },
    methods: {
      submitForm() {
        const username = this.$refs.username.value;
        if (!username) {
          alert('用户名不能为空');
          return;
        }
        alert('表单提交成功');
      }
    }
  };
  </script>
